<!-- 销售记录页面 -->
<template>
  <div class="supplierMessage">
    <!-- 搜索记录部分 -->
    <el-card class="searchCard" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>单据搜索</span>
      </div>
      <!-- 单据搜索表单 -->
      <el-form ref="searchForm" style="display:flex;flex-wrap:wrap;" class="searchForm" label-width="100px" :inline="false" size="normal">
        <!-- 单据编号搜索 -->
        <el-form-item label="单据编号：">
          <el-input style="width:200px" placeholder="单据编号" size="small" clearable />
        </el-form-item>
        <!-- 客户搜索 -->
        <el-form-item label="客户：">
          <el-input style="width:200px" placeholder="姓名、手机号" size="small" clearable />
        </el-form-item>
        <!-- 开单时间 -->
        <el-form-item class="datePicker" label="开单时间:">
          <el-date-picker
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          />
        </el-form-item>

        <!-- 选择状态 -->
        <el-form-item label="状态:">
          <el-select style="width:150px" size="small" placeholder="请选择状态">
            <el-option label="正常" value="1" />
            <el-option label="全部" value="2" />
            <el-option label="核销" value="3" />
          </el-select>
        </el-form-item>

        <!-- 商品搜索 -->
        <el-form-item label="商品：">
          <el-input style="width:200px" placeholder="名称" size="small" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="default" size="small">重置</el-button>
          <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 单据列表卡片 -->
    <el-card class="supplierList" shadow="never" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>单据列表</span>
      </div>
      <template>
        <!-- 单据列表 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="num"
            label="单据编号"
            width="200"
          />
          <el-table-column
            prop="warehouseName"
            label="客户"
            width="200"
          />
          <el-table-column
            prop="staff"
            label="开单时间"
            width="200"
          />
          <el-table-column
            prop="telephone"
            label="销售商品"
          />
          <el-table-column
            prop="contactPlace"
            label="优惠后应收"
          />
          <el-table-column
            prop="contactPlace"
            label="实付金额"
          />
          <el-table-column
            prop="contactPlace"
            label="剩余赊账"
          />
          <el-table-column
            prop="contactPlace"
            label="状态"
          />
          <el-table-column
            prop="remarks"
            label="订单跟踪"
          />
          <el-table-column
            label="操作"
            width="400"
          >
            <template>
              <el-button type="text" size="small" @click="saleOrderDetail">详情</el-button>
              <el-button type="text" size="small">核销</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <!-- 消息表格分页器 -->
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </el-card>

    <!-- 销售单详情弹框 -->
    <el-dialog
      title="销售单详情"
      center
      :visible.sync="isSaleOrderDetail"
      width="60%"
      style="padding-bottom:100px"
    >

      <!-- 单据编号以及开单时间 -->
      <div style="display:flex;justify-content:space-between;padding:10px 30px;">
        <span>单据编号： XS20190922151603223</span>  <span>开单时间：2019/12/12</span>
      </div>
      <!-- 客户姓名以及录单员姓名 -->
      <div style="display:flex;justify-content:space-between;padding:10px 30px;">
        <span>客户：张三 17312341234 </span>  <span>录单员：老王</span>
      </div>

      <!-- 商品列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="num"
          label="序号"
          width="200"
        />
        <el-table-column
          prop="warehouseName"
          label="销售商品"
          width="200"
        />
        <el-table-column
          prop="staff"
          label="规格型号"
          width="200"
        />
        <el-table-column
          prop="telephone"
          label="销售单价"
        />
        <el-table-column
          prop="contactPlace"
          label="销售数量"
        />
        <el-table-column
          prop="contactPlace"
          label="小计"
        />
        <el-table-column
          prop="contactPlace"
          label="剩余数量"
        />
      </el-table>

      <!-- 合计以及优惠后应收价格 -->
      <div style="display:flex;justify-content:space-around;padding:10px 30px;">
        <span>
          合计： <span style="color:red">1300.00</span> 元
        </span>
        <span>
          优惠后应收：<span style="color:red">1300.00</span> 元
        </span>
      </div>

      <!-- 结算方式以及收款方式 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;">
          结算方式： 部分赊账
        </span>
        <span>
          收款方式：支付宝
        </span>
      </div>

      <!-- 实收以及剩余赊账 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;">
          实收： <span style="color:red">1000.00</span> 元
        </span>
        <span>
          剩余赊账： <span style="color:red">200.00</span> 元
        </span>
      </div>

      <!-- 备注 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;">
          备注： 123456789000
        </span>
      </div>

      <!-- 关联销售退单标题 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;font-weight:bold;">
          [关联销售退单]
        </span>
      </div>
      <!-- 关联销售退单列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="num"
          label="退单编号"
          width="200"
        />
        <el-table-column
          prop="warehouseName"
          label="商品名称"
          width="200"
        />
        <el-table-column
          prop="staff"
          label="退单数量"
          width="200"
        />
        <el-table-column
          prop="telephone"
          label="退单日期"
        />
        <el-table-column
          prop="contactPlace"
          label="状态"
        />
      </el-table>

      <!-- 已出库标题 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;font-weight:bold;">
          [已出库]
        </span>
      </div>
      <!-- 已出库列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="num"
          label="出库单号"
          width="200"
        />
        <el-table-column
          prop="warehouseName"
          label="商品名称"
          width="200"
        />
        <el-table-column
          prop="staff"
          label="数量"
          width="200"
        />
        <el-table-column
          prop="telephone"
          label="日期"
        />
        <el-table-column
          prop="telephone"
          label="出库方式"
        />
        <el-table-column
          prop="telephone"
          label="异常处理"
        />
        <el-table-column
          prop="contactPlace"
          label="状态"
        />
      </el-table>

      <!-- 出库异常处理标题 -->
      <div style="padding:10px 30px;margin-top:20px;">
        <span style="margin-right:50px;font-weight:bold;">
          [出库异常处理]
        </span>
      </div>
      <!-- 出库异常处理列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="num"
          label="处理单号"
          width="200"
        />
        <el-table-column
          prop="warehouseName"
          label="处理方式"
          width="200"
        />
        <el-table-column
          prop="staff"
          label="处理数量"
          width="200"
        />
        <el-table-column
          prop="telephone"
          label="退货数量"
        />
        <el-table-column
          prop="contactPlace"
          label="状态"
        />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用，
  components: {},
  data() {
    // 这里存放数据
    return {
      isSaleOrderDetail: false, // 销售单详情

      tableData: [{ // 表单数据
        num: 1,
        warehouseName: '服务仓',
        staff: '张三',
        telephone: '17312341234',
        contactPlace: '浙江省杭州市',
        remarks: '17311111111'
      }, {
        num: 1,
        warehouseName: '服务仓',
        staff: '张三',
        telephone: '17312341234',
        contactPlace: '浙江省杭州市',
        remarks: '17311111111'
      }],
      currentPage4: 2 // 当前页数
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    saleOrderDetail() {
      this.isSaleOrderDetail = true
    },
    handleSizeChange(val) { // 分页器事件每页条数
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 分页器事件当前页
      console.log(`当前页: ${val}`)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.supplierMessage{
   width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f2f5;
    .searchCard{
      margin: 30px;
      .searchForm{//搜索表单样式
        display: flex;
      }
    }
    .supplierList{//供应商列表
      margin: 30px;
    }
    .block{//分页器样式
      margin-top: 20px;
        padding: 20px;
        display: flex;
        justify-content: center;
      }
}
</style>
